<?php
if (!isset($_S_GEO_GLOBAL_INCLUDED)) {
    $_S_GEO_GLOBAL_INCLUDED = true;
    ?>
    <style>
        .geo-container .geo-titles-container {
            border: solid 1px #e6e6e6;
            background-color: #fff;
            border-radius: 2px;
            padding: 10px;
            line-height: 20px;
            cursor: pointer;
        }

        .geo-container .geo-hint {
            color: #ccc;
        }

        .geo-dialog {
            padding: 10px 30px;
        }

        .geo-dialog .map_search_addr .layui-input-inline {
            width: 300px;
        }

        .geo-dialog .map_search_addr {
            padding-top: 10px;
        }

        .geo-dialog .map_search_addr .layui-form-label {
            width: auto;
        }

        .geo-dialog .map_search_addr .help {
            margin-left: 10px;
            background: #ccc;
            color: #fff;
            border-radius: 50%;
            border: none;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .geo-dialog .layui-form-mid {
            padding: 0 !important;
        }

        .geo-dialog .map_canvas {
            width: 600px;
            height: 450px
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=UjReLGy0ccBhGPjVWChtkIQ5"></script>
    <script>
        g.geo = {
            get: function (id) {
                var value = $("#" + id + " .geo-value").val();
                if (value) {
                    return eval("(" + value + ")");
                }
                return {};
            },
            set: function (id, value) {
                if (typeof value == 'string') {
                    value = eval("(" + value + ")");
                }
                if (value.addr) {
                    $("#" + id + " .geo-titles").html(value.addr).show();
                    $("#" + id + " .geo-hint").hide();
                } else {
                    $("#" + id + " .geo-titles").html("").hide();
                    $("#" + id + " .geo-hint").show();
                }
                $("#" + id + " .geo-value").val(JSON.stringify(value));
            },
            showDialog: function (id, callback) {
                var height = (window.frameElement ? $(window.frameElement).height() : $(window).height()) - 50;
                if (height > 600) {
                    height = 600;
                }
                var $dialog = $("#geoDialog" + id);
                layer.open({
                    type: 1,
                    title: '请选择',
                    content: $dialog,
                    area: ['80vw', height + "px"],
                    btn: ['确定', '取消'],
                    success: function (layero, index) {
                        var value = g.geo.get(id);
                        $dialog.find(".address").val(value.addr);
                        var map = $dialog.data("map");
                        if (!map) {
                            $('#mapCanvas' + id).width($dialog.width()).height(height - 185);
                            map = new BMap.Map('mapCanvas' + id);
                            if (value.lat && value.lng) {
                                var point = new BMap.Point(value.lng, value.lat);
                                map.centerAndZoom(point, 18);
                                setPoint(value.lat, value.lng);
                            } else {
                                var point = new BMap.Point(116.331398, 39.897445);
                                map.centerAndZoom(point, 18);
                                var geolocation = new BMap.Geolocation();
                                geolocation.getCurrentPosition(function (r) {
                                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                                        map.centerAndZoom(r.point, 18);
                                        setPoint(r.point.lat, r.point.lng, true);
                                    } else {
                                        alert('当前位置获取失败：' + this.getStatus());
                                    }
                                }, {enableHighAccuracy: true});
                            }
                            map.addControl(new BMap.NavigationControl());
                            map.enableScrollWheelZoom();
                            map.addControl(new BMap.MapTypeControl({
                                mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
                                anchor: BMAP_ANCHOR_TOP_RIGHT
                            }));
                            $dialog.data("map", map);
                        }

                        $dialog.find(".search").unbind("click").bind("click", function () {
                            g.loading($dialog.find(".map_canvas"));
                            var local = new BMap.LocalSearch(map, {
                                onSearchComplete: function (results) {
                                    g.loading($dialog.find(".map_canvas"), false);
                                    // 判断状态是否正确
                                    if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                                        var point = results.getPoi(0).point;
                                        setPoint(point.lat, point.lng);
                                    }
                                }
                            });
                            local.search($dialog.find(".address").val());
                        });

                        function setPoint(lat, lng, autoGetAddr) {
                            map.clearOverlays();
                            var point = new BMap.Point(lng, lat);
                            var marker = new BMap.Marker(point);
                            map.addOverlay(marker);
                            marker.enableDragging();
                            marker.setTitle("双击自动获取当前地点的位置名称");
                            map.panTo(point);
                            $dialog.data("marker", marker);

                            if (autoGetAddr === true) {
                                var gc = new BMap.Geocoder();
                                gc.getLocation(point, function (rs) {
                                    $dialog.find(".address").val(rs.address);
                                });
                            }

                            marker.addEventListener("dblclick", function () {
                                var gc = new BMap.Geocoder();
                                gc.getLocation(marker.getPosition(), function (rs) {
                                    $dialog.find(".address").val(rs.address);
                                });
                            });
                        }
                    },
                    yes: function (index, layero) {
                        var value = {};
                        value.addr = $dialog.find(".address").val();
                        var marker = $dialog.data("marker");
                        var p = marker.getPosition();
                        value.lng = p.lng;
                        value.lat = p.lat;

                        //设置geo-value的值
                        g.geo.set(id, value);

                        //调用回调
                        typeof callback == 'function' && callback(value);

                        layer.close(index);
                        return true;
                    }
                });
            }
        };
    </script>
    <?php
}
?>

<div class="<?php echo $__s_geo_class; ?> geo-container" id="<?php echo $__s_geo_id; ?>">
    <div class="geo-titles-container">
        <div class="geo-titles"></div>
        <div class="geo-hint"><?php echo $__s_geo_hint; ?></div>
    </div>
    <input name="<?php echo $__s_geo_name; ?>" class="geo-value" type="hidden"/>
</div>

<div class="<?php echo $__s_geo_class; ?> geo-dialog" id="geoDialog<?php echo $__s_geo_id; ?>"
     style="display: none;">
    <div class="map_search_addr">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入地址" class="layui-input address"/>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <button class="layui-btn search">搜索</button>

                    <button class="help" title="帮助">
                        <i class="layui-icon layui-icon-help"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="map_canvas" id="mapCanvas<?php echo $__s_geo_id; ?>"></div>
</div>

<script>
    $(document).ready(function () {
        // 首先将弹出框对应的div移动到最外层，否则有的时候会弹不出来
        document.body.appendChild(document.getElementById("geoDialog<?php echo $__s_geo_id; ?>"));

        var $container = $("#<?php echo $__s_geo_id; ?>");
        var $titlesContainer = $container.find(".geo-titles-container");
        var $dialog = $("#geoDialog<?php echo $__s_geo_id; ?>");

        //点击事件
        $titlesContainer.click(function () {
            g.geo.showDialog("<?php echo $__s_geo_id; ?>");
        });

        $dialog.find(".help").click(function () {
            var that = this;
            var tips = '1. 首先在下面的搜索框中输入地址名称<br>\n' +
                '2. 点击边上的“搜索”按钮<br>\n' +
                '3. 鼠标拖到地图中的红点到正确位置(如果地图上没出现红点，说明地址未搜索到，请更换地址写法重新搜索)<br>\n' +
                '4. 点击下方的确定按钮<br>';
            layer.tips(tips, that);
        });
    });
</script>